<template>
  <div class="all">
    <van-dropdown-menu>
      <van-dropdown-item title="综合排序" ref="item"> </van-dropdown-item>
      <van-dropdown-item title="销量最高" ref="item"> </van-dropdown-item>
      <van-dropdown-item title="距离最近" ref="item"> </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="item"> </van-dropdown-item>
    </van-dropdown-menu>
    <div
      class="nav"
      v-for="(item, index) in this.$store.state.slist[
        this.$store.state.slist.length - 1
      ]"
      :key="index"
    >
    <img :src="item.picUrl" alt="" class="pimg">
      <div class="left">
        <h4>{{ item.name }}</h4>
        <div class="fline">
            <van-icon name="star"  color="orange"/>
            <span class="one">{{(item.wmPoiScore)/10}}</span>
            <span class="two">{{item.monthSalesTip}}</span>
            <span class="three">{{item.shippingFeeTip}}</span>
            <span class="four">{{item.deliveryTimeTip}}</span>
            <span class="five">{{item.distance}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
  },
};
</script>

<style scoped>
.all {
  width: 100%;
  height: 100%;
}
.nav {
    height: 200px;
    width: 100%;
    display: flex;
    position: relative;
}
.pimg {
    width: 50px;
    height: 50px;
}
.one {
    color: orange;
    margin-right: 5px;
    font-size: 12px;
}
.four {
    display: inline-block;
    position: absolute;
    right: 50px;
    margin-right: 5px;
}
.two,.three,.four {
    margin-right: 5px;
    display: inline-block;
    font-size: 12px;

}
.five {
    position: absolute;
    right: 0;
    /* margin-top: 5px; */
    font-size: 12px;

}
</style>